<template>
	<view class="content">
	<!-- 导航栏 -->
	<u-navbar bgColor="#f9f9f9">
		<template v-slot:left>
			<picker mode="region">
				广州
			</picker>
		</template>
	
		<template v-slot:center>
			<text>皮球</text>
		</template>
	
	</u-navbar>
	<!-- 搜索 -->
	<view style="margin-top: 23%; display: flex;justify-content: space-around;">
		<view style="width: 70%; height: 50rpx;">
			<u-search bgColor="#ffffff" searchIconSize="50" borderColor="#EEEEEE" height="70" :showAction="false" placeholder="搜索球场或关键字"></u-search>
		</view>
		<view style="width: 100rpx;font-size: 80rpx;">
			<view class="add-button">
			  <text class="add-icon">+</text>  
			</view>
		</view>
	
	</view>
	<!-- 星期 -->
	<scroll-view  scroll-x="true" style="width: 100%;white-space: nowrap;margin-top: 3%; display: flex;justify-content: space-between;">
		<view @click="toWeekStadium(index)" :style="{'background-color': item.check ? '#4A43EC' : '#ffffff'}" class="weekDate" v-for="(item,index) in datas">
			<u--text :color="item.check ? '#ffffff' : '#000000'" lineHeight="20" align="center"  size="20" :text="item.data"></u--text>
			<u--text :color="item.check ? '#ffffff' : '#000000'" lineHeight="70" align="center" bold size="28" :text="item.week"></u--text>
		</view>
	</scroll-view>
	
	
	<!-- 球局 -->
	<!-- <swiper layout-type="stackLeft" style="height: 50%;">
		<swiper-item v-for="(item,index) in 3"> -->
			<view v-for="item in 3" class="ballGame">
				<view class="space-between">
					<view class="padding10-40">
						<u--text  size="35" bold text="教个朋友局"></u--text>
						<view class="margin-top-2" style="display: flex;">
							<view style="margin-right: 3%;" v-for="item in 3" class="tag">养生局</view>
						</view>
					</view>
				
					<view class="padding10-40">
						<view>
							<view class="tag">暂未成局</view>
						</view>
						<view class="padding10-30" style="width: 150rpx;">
							<u-button iconColor="#F0635A" icon="thumb-up-fill" size="mini"  color="#F0635A4D" shape="circle"  text="我参加"></u-button>
						</view>
					</view>
				</view>
				
				<view>
					<view class="padding10-40" style="display: flex;">
						<view class="image-container">
							<u--image radius="20" :showLoading="true" src="https://cdn.uviewui.com/uview/album/1.jpg" width="130px" height="130px" @click="click"></u--image>
						</view>
						<view class="padding10-40">
							<text class="distance">时间：本周六16：00-18：00</text><br>
							<text class="distance">地点：12.6km | 诺克求大球场</text><br>
							<text class="distance">类型：足球（7人制）</text><br>
							<text class="distance">收费：￥400（AA制）</text><br>
						</view>
					</view>
				</view>
				
				<view class="gameInfo" style="width: 93%; height: auto; background-color: #F2F3F5; margin: 2% auto;">
					<view class="padding10-30">
						<u--text size="20" text="00:01:44.501项目'footballBookingApp' 编译成功。前端运行日志，请另行在小程序开发工具的控制台查看00:01:44.501 项目 'footballBookingApp' 编译成功。"></u--text>
					</view>
				</view>
				
				<!-- 头像 -->
				<view class="space-between margin-top-2">
					<view class="padding10-30" style="display: flex;">
						<view v-for="item in 6" style="margin-right: 2%">
							<u--image @click="toOther()"    width="26px" height="26px" radius="8px" src="https://cdn.uviewui.com/uview/album/1.jpg"></u--image>
						</view>
					</view>
					<view class="padding10-30">
						<text>报名 12/</text>
						<text>16-30</text>
					</view>
				</view>
				
			</view>
<!-- 		</swiper-item>
	</swiper> -->
	
		<!-- 底部tab -->
		<tabbar :i="1"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar.vue'//这里就是在页面中引入组件路径的写法
	
	export default {
		components:{
			tabbar
		},
		data() {
			return {
				datas:[
					{
						data:'10月12日',
						week:"今天",
						check:true
					},
					{
						data:'10月13日',
						week:"周日",
						check:false
					},
					{
						data:'10月12日',
						week:"周一",
						check:false
					},
					{
						data:'10月15日',
						week:"周二",
						check:false
					},
					{
						data:'10月12日',
						week:"周三",
						check:false
					},
					{
						data:'10月16日',
						week:"周四",
						check:false
					},
					{
						data:'10月17日',
						week:"周五",
						check:false
					},
					{
						data:'10月18日',
						week:"周六",
						check:false
					}
				]
			}
		},
		methods: {
			toWeekStadium(i){
				console.log(i);
				this.datas.map((item, index) => {
					item.check = index === i ? true : false
				})
			},
			
			// 跳转到用户界面
			toOther(){
				uni.navigateTo({
					url:"/subpkg/me/other"
				})
			}
		}
	}
</script>

<style>
.content {
		width: 100%;
		height: 100vh;
		background-color: #f9f9f9;
		padding-bottom: 1000rpx;
	}
	.weekDate{
		width: 20%;
		height: 70rpx;
		border-radius: 11.22px;
		opacity: 1;
		padding: 50rpx 20rpx;
		background: #4A43EC;
		box-shadow: 0px 4px 10px 0px rgba(83, 89, 144, 0.07);
		display: inline-block;
		margin-left: 30rpx;
			
	}
	.ballGame{
		padding: 20rpx 0;
		width: 93%;
		height: auto;
		border-radius: 16.98px;
		opacity: 1;
		margin: 3% auto;
		background: #FFFFFF;
		box-shadow: 0px 2.12px 20px 0px rgba(83, 89, 144, 0.15);
	}
	
	.gameInfo{
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100%;
		border-radius: 24rpx;
		opacity: 1;
		background: #FFFFFF;
		box-sizing: border-box;
		margin: 0 7rpx;
	
	}
	
	.distance {  
	  color: #9593A4; /* 距离文本颜色 */  
	  font-size: 20rpx; /* 字体大小 */  
	} 
	.add-button {
	  width: 80rpx;  
	  height: 80rpx;  
	  background-color: #4A43EC; /* 按钮的背景颜色 */  
	  border-radius: 10px; /* 圆形按钮 */  
	  display: flex;  
	  justify-content: center;  
	  align-items: center;  
	  color: white; /* 按钮颜色 */  
	  font-size: 23px; /* 按钮文本大小 */  
	}  
</style>
